<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>我是普通文本输入框</legend>
        <input type="text" name="" id="" placeholder="请输入文本">
    </fieldset>
    <fieldset>
        <legend>日期类型</legend>
        <div>
            生日：<input type="date" name="bday" id=""> <button data-type="date" class="show-value">获取值</button> <span data-type="date"></span>
          </div>
          <div>
            当前时间: <input type="datetime" name="now" id=""> <button data-type="datetime" class="show-value">获取值</button> <span data-type="datetime"></span>
          </div>
          <div>
            事件发生的具体时间: <input type="datetime-local" name="" id=""> <button data-type="datetime-local" class="show-value">获取值</button> <span data-type="datetime-local"></span>
          </div>
          <div>
            选择时间：<input type="time"> <button data-type="time" class="show-value">获取值</button> <span data-type="time"></span>
          </div>
          <div>
            出生年月：<input type="month" name="bdaymonth"> <button data-type="month" class="show-value">获取值</button> <span data-type="month"></span>
          </div>
          <div>
            当前是今年的第几周：<input type="week" name="week-year"> <button data-type="week" class="show-value">获取值</button> <span data-type="week"></span>
          </div>       
    </fieldset>
    <fieldset>
        <legend>其它</legend>
        <div>
            你喜欢的颜色：<input type="color" name="favcolor" id="">
            <button data-type="color" class="show-value">获取值</button>
            <span data-type="color"></span>
        </div>
        <form oninput="x.value=range.value">
            选择一个值：<input type="range" min="10" max="100" id="range" >
            <output name="x" for="range"></output>
        </form>
        <div>
            <input type="search" name="" id="" placeholder="请输入搜索内容">
        </div>
        <div>
            <input type="number" name="" id="" placeholder="请输入电话号码">
        </div>
        <div>
           <input type="number" name="" id="" placeholder="请输入数字">
        </div>
    </fieldset>
    <script>
        let btns = document.querySelectorAll('.show-value');
        Array.from(btns).forEach((e, i) => {
          let type = e.dataset.type;
          e.onclick = function() {
            let value = document.querySelector(`input[type=${type}]`).value;
            document.querySelector(`span[data-type=${type}]`).innerText = value;
          }
          
        });
      </script>
</body>
</html>